<template>
    <!-- offer跟进 -->
    Details
    <div style="width: 100%; box-shadow: var(--el-border-color-light) 0px 0px 10px">
        <el-splitter>
            <el-splitter-panel :size="'80%'" style="height: 900px; padding: 10px;">
                <div class="demo-panel">
                    <el-row :gutter="24">
                        <el-col :span="24" style="border-bottom: 1px black solid; padding-bottom: 10px;">
                            <el-button size="default" @click="printPage" plain><el-icon>
                                    <Printer />
                                </el-icon>打印</el-button>
                            <el-button size="default" @click="update" plain><el-icon>
                                    <EditPen />
                                </el-icon>编辑</el-button>
                            <el-button size="default" @click="Delete" plain><el-icon>
                                    <CopyDocument />
                                </el-icon>删除</el-button>

                        </el-col>


                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                                <el-form-item label="offer基本信息" label-position="top"
                                    :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                    <div class="progress-bar">
                                        <div class="progress"></div>
                                    </div>
                                </el-form-item>

                            </div>
                        </el-col>


                        <!--  -->


                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="所属需求编号"
                                    label-position="top" required>
                                    <el-input :model-value="resumeInformationData[0]?.candidateresume?.resumeRequirements" style="width: 260px;" clearable disabled />
                                </el-form-item>
                            </div>
                        </el-col>

                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="简历信息" label-position="top"
                                    required>
                                    <div class="el-form-item__content">
                                        <el-input :model-value="resumeInformationData[0]?.candidateresume?.candidateid" style="width: 260px" disabled />
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <el-form-item label="招聘负责人" label-position="top">
                                    <el-button size="small" style="width: 260px;" ref="buttonRef"
                                        v-click-outside="onClickOutside"><el-icon>
                                            <UserFilled />
                                        </el-icon>{{ resumeInformationData[0]?.candidateresume?. screenpeople}}</el-button>
                                    <el-popover ref="popoverRef" :virtual-ref="buttonRef" trigger="click" :title="resumeInformationData[0]?.candidateresume?. screenpeople"
                                        virtual-triggering>
                                        <hr>
                                        <span> 部门：人事部 </span><br>
                                        <span> 手机:1008611 </span>
                                    </el-popover>

                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="发放时间" label-position="top"
                                    required>
                                    <div class="el-form-item__content">
                                        <el-input placeholder="2020-07-01" style="width: 260px;" disabled></el-input>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="候选人姓名"
                                    label-position="top" required>
                                    <div class="el-form-item__content">

                                        <el-input :model-value="resumeInformationData[0]?.candidateresume?. candidatename" style="width: 260px" disabled />
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="offer岗位"
                                    label-position="top" required>
                                    <div class="el-form-item__content">

                                        <el-input placeholder="前端程序员" style="width: 260px" disabled />
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="入职部门" label-position="top"
                                    required>
                                    <div class="el-form-item__content">
                                        <el-input placeholder="开发部" style="width: 260px" disabled />
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="手机号" label-position="top"
                                    required>
                                    <div class="el-form-item__content">

                                        <el-input placeholder="1008611" style="width: 260px" disabled />
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="邮箱" label-position="top"
                                    required>
                                    <div class="el-form-item__content">

                                        <el-input placeholder="123456@qq.com" style="width: 260px" disabled />
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="试用期薪酬（元）"
                                    label-position="top" required>
                                    <div class="el-form-item__content">

                                        <el-input placeholder="5000" style="width: 260px" disabled />
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="转正薪酬（元）"
                                    label-position="top" required>
                                    <div class="el-form-item__content">

                                        <el-input placeholder="8000" style="width: 260px" disabled />
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="报到日期" label-position="top"
                                    required>
                                    <div class="el-form-item__content">
                                        <el-input placeholder="2020-07-01" style="width: 260px;" disabled></el-input>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="报道地址报道地址"
                                    label-position="top" required>
                                    <div class="el-form-item__content">
                                        <el-input placeholder=" 123" style="width: 260px;" disabled></el-input>

                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                                <el-form-item label="跟进结果" label-position="top"
                                    :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                    <div class="progress-bar">
                                        <div class="progress"></div>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <el-form-item label="offer状态" label-position="top" disabled>
                                    <el-input placeholder="已发放" style="width: 260px" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="24">
                            <hr>
                            <div class="grid-content ep-bg-purple-light"><el-descriptions title="" :column="2"
                                    direction="horizontal">
                                    <el-descriptions-item label="提交人："> <el-text class="mx-1"
                                            type="primary">早濑优香</el-text></el-descriptions-item>
                                    <el-descriptions-item label="提交时间：">2025年7月4日16:00:45</el-descriptions-item>
                                    <el-descriptions-item label="更新时间："
                                        :span="2">2025年7月4日16:00:45</el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </el-col>
                    </el-row>
                </div>

            </el-splitter-panel>
            <!--  -->
            <el-splitter-panel :max="260">
                <div class="demo-panel" style="padding: 6px;">
                    <el-tabs v-model="DefaultDataComments" tab-position="top" @tab-click="DataComment">
                        <el-tab-pane label="数据日志" name="first">
                            <div class="card-container">
                                <el-card style="width: 250px;">
                                    <el-row :gutter="24">
                                        <el-col :span="12"></el-col>
                                        <el-col :span="12" style="font-size: 10px;">2025-07-09 09:45</el-col>
                                        <el-col :span="12" style="font-size: 12px;">早濑优香</el-col>
                                        <el-col :span="12" style="font-size: 12px;">修改</el-col>
                                        <el-col :span="12" style="font-size: 12px;"><el-icon>
                                                <Tickets />
                                            </el-icon>简历状态：</el-col>
                                        <el-col :span="12" style="font-size: 12px;"></el-col>
                                        <el-col :span="12" style="font-size: 12px;"><el-button type="danger"
                                                size="small" plain round
                                                class="line-through-btn">修改</el-button></el-col>
                                        <el-col :span="12" style="font-size: 12px;"></el-col>
                                        <el-col :span="12" style="font-size: 12px;"><el-button type="success"
                                                size="small" plain round
                                                class="line-through-btn">修改</el-button></el-col>

                                    </el-row>

                                </el-card>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="评论" name="second">
                            <div style="height: 800px; position: relative;"> <!-- 父级设置相对定位 -->
                                <el-empty style="
                                    position: absolute; /* 子元素绝对定位 */
                                    top: 50%;          /* 垂直方向距离顶部50% */
                                    left: 50%;         /* 水平方向距离左侧50% */
                                    transform: translate(-50%, -50%); /* 向左、向上偏移自身50%，实现精准居中 */
                                    " />
                            </div>
                            <div style="display: flex; justify-content: center; width: 100%;">
                                <el-input placeholder="留下你的精彩评论吧(Ctrl+Enter：发送)" clearable
                                    style="width: 250px; font-size: 12px;" />
                            </div>
                        </el-tab-pane>
                    </el-tabs>

                </div>
            </el-splitter-panel>
        </el-splitter>
    </div>
    <el-dialog title="编辑" v-model="TalentModificationDisplay" fullscreen destroy-on-close>
         <hr>
        <OfferFollowUpModification></OfferFollowUpModification>
       
    </el-dialog>

</template>
<script setup lang="ts">
import request from '@/api/request'
import { ref, unref ,defineProps, onMounted} from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ClickOutside as vClickOutside } from 'element-plus'
import OfferFollowUpModification from '@/views/recruitment/OfferManagement/OfferFollowUpModification.vue'
const resumeId = defineProps(['data'])
const buttonRef = ref()
const popoverRef = ref()
const DefaultDataComments = ref('first')//数据评论默认值 
const TalentModificationDisplay = ref(false)//修改弹窗显示

//打印
const printPage = () => {
    window.print()
}
const update = () => {
    TalentModificationDisplay.value = true;
    console.log('点击了编辑');
}
const resumeInformationData =ref([])
const readTheOfferAndResumeInformation=()=>{
    request({
        url:'/offermanagementtable/OfferWithCandidateResultMap',
        method:'get',
        params:{
            candidateId:resumeId.data
        }
    }).then(res=>{
        ResumeInformation.value
        resumeInformationData.value=res.data
        console.log("查询数据",resumeInformationData.value);
    })

}
onMounted(()=>{
    readTheOfferAndResumeInformation()
})

const Delete = () => {
    ElMessageBox.confirm(
        '你确定要删除所选数据吗？',
        '通知',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'warning',
                message: '取消操作',
            })

        })
}
// 点击外部关闭
const onClickOutside = () => {
    unref(popoverRef).popperRef?.delayHide?.()
    console.log("点击了");
}



const DataComment = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}


const ResumeInformation = ref([
    { id: 1, TalentResumeID: 'ZP0001', WarehousingDate: "2025-01-01", IntendedPosition: '程序员', JobNature: '正式', CandidateName: '结成明日奈', Gender: '女', CellPhone: '1008611', DateOfBirth: '2004-01-01', age: '21', Degree: '本科', specialized: '计算机', GraduationTime: '2020-01-01', school: 'XXX科技大学', MarriageAndChildbearing: '未婚', LastWork: '没有', ResumeStatus: "待处理" },


]) //简历信息数据
const ResumeInformationData = ref([
    { id: "IntendedPosition", label: '意向岗位', width: '160' },
    { id: "JobNature", label: '应聘类型', width: '160' },
    { id: "CandidateName", label: '姓名', width: '160' },
    { id: "Gender", label: '性别', width: '160' },
    { id: "CellPhone", label: '手机号', width: '160' },
    { id: "DateOfBirth", label: '出生年月', width: '160' },
    { id: "age", label: '年龄', width: '160' },
    { id: "Degree", label: '学历', width: '160' },
    { id: "specialized", label: '专业', width: '160' },
    { id: "GraduationTime", label: '毕业时间', width: '160' },
    { id: "school", label: '毕业院校', width: '160' },
    { id: "MarriageAndChildbearing", label: '婚育情况', width: '160' },
    { id: "LastWork", label: '工作经历', width: '160' },
    { id: "ResumeStatus", label: '简历状态', width: '160' },
])//简历信息   

const a = ref()
const b = ref()

const InterviewerButton = () => {
    unref(a).a?.b?.()
}
</script>

<style scoped>
/* 外层容器，可控制整体条的高度、圆角等 */
.progress-bar {
    height: 6px;
    background-color: #ccebf7;
    border-radius: 3px;
    display: flex;
    width: 100%;
    /* 确保进度条容器宽度占满父容器 */
    overflow: hidden;
    /* 防止子元素溢出 */
}

.progress {
    width: 8%;
    height: 10;
    background-color: #61c3ea;
    border-radius: 3px 0 0 3px;
    transition: width 0.3s ease;
    /* 添加宽度变化的过渡效果 */
}



/* 单选框选中样式 */
.el-radio.is-checked .radio-custom {
    background-color: #61c3ea;
    border-color: #409EFF;
}

.card-container {
    display: flex;
    /* 卡片排列方式 */
    flex-wrap: wrap;
    /* 卡片之间的间距 */
    justify-content: center;
    /* 居中 */
}

/* 删除按钮样式 */
.line-through-btn {
    text-decoration: line-through;
}
</style>
